<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style></style>
  </head>
  <body>
    <div class="app">Hello Word</div>
    <script>
      //模拟 Vue 中的data选项
      let data = {
        msg: "Hello Word",
      };
      // 模拟 Vue 的实例
      let vm = {};

      //数据劫持：当访问设置 vm 中的成员的时候,做一些干预操作
      Object.defineProperty(vm, "msg", {
        //可枚举
        enumerable: true,
        //可配置(可以使用delete删除，可以通过defineProperty 重新定义)
        configurable: true,
        //当获取值的时候执行
        get() {
          console.log("get:", data.msg);
          return data.msg;
        },
        //当设置值的时候执行
        set(newValue) {
          console.log("set", newValue);
          if (newValue === data.msg) {
            return;
          }
          data.msg = newValue;
          document.querySelector(".app").textContent = data.msg;
        },
      });

      vm.msg = "哈哈哈哈";
      console.log(vm.msg);
    </script>
  </body>
</html>
